<template>
	<view>
		<view class="title">{{ info.name }}</view>

		<view class="time">价格：{{ info.price }}</view>

		<image :src="info.pic"></image>

		<view class="content">{{ info.details }}</view>
		<!-- 加入购物车布局 -->
		<view class="bottom">
			<view class="img" >
				<image @click="gomyCart" src="../../static/images/tab9.png"></image>
			</view>
			<view class="addShop" @click="addShop">加入购物车</view>
			<view class="buy-now">直接购买</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			info: '' //存储详情的数据
		};
	},
	onLoad(options) {
		//接收food路由传递过来的产品id
		console.log('产品详情', options.id);
		//获取数据
		wx.request({
			url: 'http://iwenwiki.com:3002/api/foods/list/detail?id=' + options.id,
			success: res => {
				console.log(res.data);
				if (res.data.status == 200) {
					//res.data.data[0]
					this.info = res.data.data[0]; //{}对象
				}
			}
		});
	},
	//将产品添加到购物车
	methods: {
		addShop() {
			const info = this.info;
			wx.request({
				url: 'http://iwenwiki.com:3002/api/cart/add',
				data: {
					name: info.name,
					pic: info.pic,
					num: 1, //添加产品的数量默认为1
					info: info.description,
					price: info.price
				},
				success: res => {
					//添加购物车后返回的数据
					// console.log(res.data);
					if (res.data.status == 200) {
						wx.showToast({
							title: '加入成功',
							icon: 'none'
						});
					}
				}
			});
		},
		//点击购物车事件跳转到购物车
		gomyCart(){
			wx.switchTab({
				url:'/pages/myCart/myCart'
			})
		}
	}
};
</script>

<style>
/* pages/productDetail/productDetail.wxss */
page {
	background: #f5f5f5;
}

.title {
	background: #fff;
	padding: 20rpx;
	font-size: 36rpx;
	font-weight: bold;
}

.content {
	padding: 20rpx;
	line-height: 36rpx;
	font-size: 28rpx;
	color: #666;
	text-indent: 2em;
	background: #fff;
	margin-bottom: 160rpx;
}

.time {
	padding: 20rpx;
	margin-top: 20rpx;
	margin-bottom: 20rpx;
	background: #fff;
}
/* 购物车布局 */
.bottom {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #fff;
	height: 80rpx;
	line-height: 80rpx;
	align-items: center;
	display: flex;
	padding: 20rpx;
	font-size: 30rpx;
}
.img {
	flex: 1;
	text-align: right;
}
.img image {
	width: 60rpx;
	height: 60rpx;
	padding-right: 20rpx;
	margin-top: 10rpx;
}

.addShop {
	background: red;
	color: #fff;
	padding: 0 20rpx;
	border-radius: 10rpx 0 0 10rpx;
}

.buy-now {
	background: pink;
	color: #fff;
	padding: 0 20rpx;
	border-radius: 0rpx 10rpx 10rpx 0;
}
</style>
